import React, { PureComponent, Suspense } from 'react';
import { Layout, Avatar, Button, Icon, Row, Col, Drawer, Badge } from 'antd';
import classNames from 'classnames';
import Link from 'umi/link';
import styles from './index.less';
import PageLoading from '../PageLoading';
import { getDefaultCollapsedSubMenus } from './SiderMenuUtils';
import { title } from '../../defaultSettings';
import UserImg  from '../../assets/user.png';
import bell  from '../../assets/menu/bell.png';
import setting  from '../../assets/menu/setting.png';
import logout  from '../../assets/menu/logout.png';
import router from 'umi/router';
import NotificationView from '@/pages/Account/Settings/NotificationView';
import Notice from  '@/pages/Notice/index'
import { connect } from 'dva';

const BaseMenu = React.lazy(() => import('./BaseMenu'));
const { Sider } = Layout;

let firstMount = true;



export default class SiderMenu extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      openKeys: getDefaultCollapsedSubMenus(props),
      close:false,
      type:null,
      title:null
    };
  }

  componentDidMount() {
    firstMount = false;
  }

  static getDerivedStateFromProps(props, state) {
    const { pathname, flatMenuKeysLen } = state;
    if (props.location.pathname !== pathname || props.flatMenuKeys.length !== flatMenuKeysLen) {
      return {
        pathname: props.location.pathname,
        flatMenuKeysLen: props.flatMenuKeys.length,
        openKeys: getDefaultCollapsedSubMenus(props),
      };
    }
    return null;
  }

  isMainMenu = key => {
    const { menuData } = this.props;
    return menuData.some(item => {
      if (key) {
        return item.key === key || item.path === key;
      }
      return false;
    });
  };

  handleOpenChange = openKeys => {
    const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1;
    this.setState({
      openKeys: moreThanOne ? [openKeys.pop()] : [...openKeys],
    });
  };

  onLogout=()=>{
      const { dispatch } = this.props;
      dispatch({
        type: 'login/logout',
      });
  };

  sets = (type) => {
    let title = null;
    if(type){
      title ='用户设置'
    }else{
      title ='通知中心'
    }
   this.setState({close:true,type,title})
  };


  onClose = () => {
    this.setState({
      close: false,
    });
  };



  render() {
    const { logo, collapsed, onCollapse, fixSiderbar, theme, isMobile,user } = this.props;
    const { openKeys,type,title } = this.state;
    const defaultProps = collapsed ? {} : { openKeys };

    const siderClassName = classNames(styles.sider, {
      [styles.fixSiderBar]: fixSiderbar,
      [styles.light]: theme === 'light',
    });
    return (
      <Sider
        trigger={null}
        collapsed={collapsed}
        breakpoint="lg"
        width={240}
        theme={theme}
        className={siderClassName}
      >
        <div className={styles.logo} id="logo">
          <Link to="/">
            <img src={logo} alt="logo"/>
          </Link>
        </div>
        <Avatar src={UserImg} style={{ margin: '63px auto 0', display: 'block', width: 80, height: 80, borderRadius: 40 ,background:"#fff"}}/>
        <div className={styles.userName}>{user.nick}</div>
        <div className={styles.btnGroup}>
          <Row>
            <Col span={3} />
            <Col span={6}>
                <Badge count={user.unReadNoticeCount}>
                  {/*<Icon type='bell' onClick={()=>this.sets(0)} style={{color:"#a0a1a5"}} />*/}
                  <img src={bell} height={14} onClick={()=>this.sets(0)}/>
                </Badge>
            </Col>
            <Col span={6}>
              {/*<Icon type="setting" onClick={()=>this.sets(1)} style={{color:"#a0a1a5"}} />*/}
              <img src={setting}  height={14} onClick={()=>this.sets(1)}/>
            </Col>
            <Col span={6}>
              {/*<Icon type="logout" onClick={this.onLogout} style={{color:"#a0a1a5"}} />*/}
              <img src={logout}  height={14} onClick={this.onLogout} />
            </Col>
            <Col span={3} />
          </Row>
        </div>
        <Suspense fallback={<PageLoading/>}>
          <BaseMenu
            {...this.props}
            mode="inline"
            handleOpenChange={this.handleOpenChange}
            onOpenChange={this.handleOpenChange}
            style={{ padding: '16px 0',boxSizing:'border-box',width: '100%',height:'calc(100% - 310px)',overflowY:'auto',overflowX:'hidden' }}
            {...defaultProps}
          />
        </Suspense>
        <Drawer
          className='zdyset'
          title={
            <span  onClick={this.onClose} style={{cursor:'pointer'}}>
                <Icon type="arrow-left" style={{ marginRight: 20 }} />
              {title}
              </span>
          }
          placement="right"
          closable={false}
          onClose={this.onClose}
          visible={this.state.close}
          width='calc(100vw - 245px)'
          destroyOnClose
        >

          {
            type ?
              <NotificationView closes={this.submit}></NotificationView>
            :
              <Notice />
          }
        </Drawer>

      </Sider>
    );
  }
}
